<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: deepskyblue;
            overflow: hidden;
        }

        .sun,
        .sun::before,
        .sun::after{
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: #fff;
            left:100px;
            top:100px;
            border-radius: 50%;
        }

        .sun::before,
        .sun::after{
           content:"";
           left:0;
           top:0;
           animation:  bigger 1.5s infinite linear;
        }

        .sun::after{
            animation-delay: 0.75s;
        }

        @keyframes bigger {
            0%{
                transform:scale(1);
                opacity: 1;
            }

            100%{
                transform:scale(2);
                opacity: 0.1;
            }
        }

        .water,
        .water::before,
        .water::after{
            position: absolute;
            left:0;
            bottom:0;
            width: 100%;
            height: 235px;
        }

        .water::before,
        .water::after{
            content:"";
            background:url(1.png) no-repeat left bottom;
            opacity: 0.3;

            animation: upDown 1s infinite alternate;
        }

        .water::after{
            background:url(2.png) no-repeat left bottom;
            animation-delay: 0.5s;
        }

        @keyframes upDown{
            0%{
                transform:translateY(0);
            }

            100%{
                transform:translateY(30px);
            }
        }
    </style>
</head>
<body>
    <div class="sun"></div>
    <div class="water"></div>
</body>
</html>